<template>
  <div class="storebox">
    <div class="top">
      <div class="title">
        <img class="map" src="../../assets/image/icon_dizhi.png" alt />
        <img class="xu" src="../../assets/image/logo.png" alt />
        <div class="search">
          <img class="search-pic" src="../../assets/image/search.png" alt />
          <input type="text" v-model="sear" @keydown.enter="search" name id placeholder="按内容搜索" />
        </div>
        <img class="shop" src="../../assets/image/icon_my.png" alt />
      </div>
      <div class="nav-bottom">
        <div class="top-list">
          <ul class="lb">
            <li v-for="item in gcate" :key="item.id">{{item.catename}}</li>
            <div class="fla">
              <span>分类</span>
            </div>
          </ul>
        </div>
      </div>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in gbanner" :key="item.id">
        <img :src="$pregImg+item.img" alt />
      </van-swipe-item>
    </van-swipe>
    <div class="tz">
      <div class="tz-min">
        <img src="../../assets/image/seckill.png" alt />
        <div>限时秒杀</div>
      </div>
      <div class="tz-min">
        <img src="../../assets/image/top.png" alt />
        <div>畅销商品</div>
      </div>
      <div class="tz-min">
        <img src="../../assets/image/brand.png" alt />
        <div>品质大牌</div>
      </div>
      <div class="tz-min">
        <img src="../../assets/image/selfsupport.png" alt />
        <div>小U自营</div>
      </div>
      <div class="tz-min">
        <img src="../../assets/image/integral.png" alt />
        <div>积分商城</div>
      </div>
    </div>
    <!-- <div class="pic">
      <div class="l-pic">
        <div class="one">
          <span>限时秒杀</span>
          <span>查看更多></span>
        </div>
        <p>每天0点场,好货秒不停</p>
        <div class="time">
          <span>05</span>
          <i>:</i>
          <span>20</span>
          <i>:</i>
          <span>48</span>
        </div>
      </div>
      <div class="r-pic">
        <div class="pic-t">
          <span>品牌上新</span>
          <p>9点整,抢大牌</p>
          <p>疯抢红包></p>
        </div>
        <div class="pic-b">
          <span>品牌上新</span>
          <p>9点整,抢大牌</p>
          <p>疯抢红包></p>
        </div>
      </div>
    </div>-->
    <!-- 倒计时 -->
 <!--  -->
    <div class="xianshi">
      <div class="left">
        <div class="one">限时抢购</div>
        <div class="two">
          <span>{{ shijian.tian }}</span>
          <i>:</i>
          <span>{{ shijian.shi }}</span>
          <i>:</i>
          <span>{{ shijian.fen }}</span>
          <i>:</i>
          <span>{{ shijian.miao }}</span>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <div class="one">品牌上新</div>
          <div class="two">九点整，抢大牌</div>
          <div class="three">疯抢红包 ></div>
        </div>
        <div class="right-bottom">
          <div class="one">日用好物</div>
          <div class="two">愿君多采撷</div>
        </div>
      </div>
    </div>
 <!--  -->
    <div class="oneone">
      <div class="one-title">
        <div class="one-t-l">双十一尖货预购</div>
        <div class="one-t-r">畅购全球</div>
      </div>
      <div class="one-pic">
        <div class="op">
          <img src="../../assets/image/01.png" alt />
        </div>
        <div class="op">
          <img src="../../assets/image/02.png" alt />
        </div>
        <div class="op">
          <img src="../../assets/image/03.png" alt />
        </div>
        <div class="op">
          <img src="../../assets/image/04.png" alt />
        </div>
      </div>
    </div>
    <div class="hot">
      <div class="htl">
        <div :class="{active:isnum===0}" id="h" @click="changeHot(0)">热门推荐</div>
        <div :class="{active:isnum===1}" id="h" @click="changeHot(1)">上新推荐</div>
        <div :class="{active:isnum===2}" id="h" @click="changeHot(2)">所有商品</div>
      </div>
      <div class="hl hr" v-for="(item,index) in ghortgoods[isnum].content" :key="index">
        <div class="hlone">
          <div class="img-ll">
            <img :src="$pregImg+item.img" alt />
          </div>
          <div class="det-rr">
            <div class="de">{{item.goodsname}}</div>
            <div class="de">现价格: {{item.price}}</div>
            <div class="de">
              <del>原价格:{{item.market_price}}</del>
            </div>
            <div class="de">
              <button @click="buydetail(item.id)">立即抢购</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCate, getBanner, getHortGoods } from "../../request/api.js";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 
      timer: 0,
      shijian: {
        tian: "",
        shi: "",
        fen: "",
        miao: ""
      },
      // 
      sear: "",
      gcate: [],
      gbanner: [],
      isnum: 0,
      ghortgoods: [{ content: [] }, { content: [] }, { content: [] }],
    };
  },

  methods: {
    // 
    getime(time) {
      let timeObj = {};
      timeObj.tian = Math.floor(time / (1000 * 60 * 60 * 24));
      timeObj.shi = Math.floor((time / (1000 * 60 * 60)) % 24);
      timeObj.fen = Math.floor((time / (1000 * 60)) % 60);
      timeObj.miao = Math.floor((time / 1000) % 60);
      return timeObj;
    },
    // 
    changeHot(num) {
      this.isnum = num;
      console.log(this.isnum);
    },
    buydetail(i) {
      this.$router.push(`/goodsdetail?id=${i}`);
    },
    search() {
      this.$router.push(`/search?keywords=${this.sear}`);
    },
    // 
    ...mapActions({
      settime: "countdownAction"
    })
    // 
  },
  mounted() {
    // 
    this.settime();
    setTimeout(() => {
      this.timer = this.countdown;
    }, 200);

    setInterval(() => {
      this.timer -= 1000;
    }, 1000);
// 
    getCate().then(res => {
      this.gcate = res.list;
      // console.log(res.list);
      // console.log(this.gcate);
    });
    getBanner().then(res => {
      console.log(res);
      this.gbanner = res.list;
    });
    getHortGoods().then(res => {
      // console.log(res);
      this.ghortgoods = res.list;
    });
  },
  // 
   computed: {
    ...mapGetters({
      countdown: "countdown",
    }),
    // 
  },
  watch: {
    timer(v) {
      this.shijian = {
        tian: this.getime(v).tian,
        shi: this.getime(v).shi,
        fen: this.getime(v).fen,
        miao: this.getime(v).miao
      };
    }
  }
};
</script>

<style scoped>
.storebox {
  width: 100%;
}
.top {
  width: 100%;
  height: 0.8rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
}
.map {
  width: 0.18rem;
  height: 0.22rem;
}
.xu {
  width: 0.91rem;
  height: 0.24rem;
}
.shop {
  width: 0.2rem;
  height: 0.2rem;
}
.title {
  display: flex;
  justify-content: space-evenly;
  height: 0.48rem;
  align-items: center;
}
.search {
  width: 1.7rem;
  height: 0.32rem;
  position: relative;
}
.search input {
  width: 1.7rem;
  height: 0.32rem;
  padding-left: 0.34rem;
}
.search-pic {
  width: 0.16rem;
  height: 0.16rem;
  position: absolute;
  left: 0.12rem;
  top: 0.08rem;
}
.nav-bottom {
  width: 100%;
  height: 0.32rem;
  position: relative;
}
.top-list {
  width: 100%;
  color: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  margin-right: 0.65rem;
}
.fla {
  width: 0.65rem;
  height: 0.32rem;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  color: #fff;
  font-size: 0.16rem;
  background-image: linear-gradient(180deg, #ff7a68 0%, #ff8a80 100%);
}
.fl img {
  width: 0.11rem;
  height: 0.12rem;
}
.lb {
  height: 0.32rem;
  display: flex;
}
li {
  text-align: center;
  padding: 0px 0.05rem;
  white-space: nowrap;
  font-size: 0.16rem;
}
.lb li:nth-last-of-type(1) {
  padding-right: 0.65rem;
}
/* 轮播图 */
.my-swipe .van-swipe-item {
  margin-top: 0.1rem;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.my-swipe img {
  width: 3.35rem;
  height: 1.95rem;
}
/* 跳转 */
.tz {
  height: 0.93rem;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.tz img {
  width: 0.32rem;
  height: 0.32rem;
}
.tz-min {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* 图片 */
/* .pic {
  width: 100%;
  height: 1.93rem;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.l-pic {
  width: 1.75rem;
  height: 1.75rem;
  background-image: url(../../assets/image/big.png);
  background-size: 100%;
  margin-right: 0.05rem;
  padding: 0.1rem 0.1rem 0px 0.1rem;
}
.l-pic .one span:nth-of-type(1) {
  font-size: 0.16rem;
  color: #85a642;
  line-height: 0.16rem;
  font-weight: 800;
}
.l-pic p {
  color: #b1cc7a;
}
.l-pic .time span {
  display: inline-block;
  width: 0.16rem;
  height: 0.18rem;
  font-size: 0.14rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.18rem;
  background-image: linear-gradient(180deg, #85a642 0%, #b1cc7a 100%);
  border-radius: 1px;
}
.r-pic {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pic-t {
  width: 1.75rem;
  height: 0.85rem;
  background-image: url(../../assets/image/small.png);
  background-size: 100%;
  padding: 0.1rem 0.1rem 0px 0.1rem;
}
.pic-t span {
  color: #ff6040;
  font-size: 0.16rem;
  display: block;
  margin-bottom: 0.1rem;
  font-weight: 800;
}
.pic-t p:nth-of-type(1) {
  color: #ff9580;
}
.pic-t p:nth-of-type(2) {
  color: #fff;
  display: block;
  width: 0.7rem;
  height: 0.2rem;
  text-align: center;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff9f80 100%);
  border-radius: 2px 12px 12px 2px;
}
.pic-b {
  width: 1.75rem;
  height: 0.85rem;
  background-image: url(../../assets/image/b02.png);
  background-size: 100%;
  padding: 0.1rem 0.1rem 0px 0.1rem;
}
.pic-b span {
  color: #af40ff;
  font-size: 0.16rem;
  display: block;
  margin-bottom: 0.1rem;
  font-weight: 800;
}
.pic-b p:nth-of-type(1) {
  color: #ca80ff;
}
.pic-b p:nth-of-type(2) {
  color: #fff;
  display: block;
  width: 0.7rem;
  height: 0.2rem;
  text-align: center;
  background-image: linear-gradient(180deg, #af40ff 0%, #f58cff 100%);
  border-radius: 2px 12px 12px 2px;
} */
/* 双十一 */
.oneone {
  width: 100%;
  height: 1.4rem;
  display: flex;
  flex-direction: column;
}
.one-title {
  display: flex;
  justify-content: space-evenly;
  height: 0.5rem;
  width: 100%;
  align-items: center;
}
.one-t-r {
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.18rem;
}
.one-pic img {
  width: 0.8rem;
  width: 0.8rem;
}
.one-pic {
  display: flex;
  justify-content: center;
  padding: 0px 0.1rem;
}
.one-pic .op {
  margin: 0px 0.05rem;
}
/* 推荐 */
.hot {
  width: 100%;
  margin-bottom: 0.62rem;
}
.htl {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 90%;
  height: 0.44rem;
  margin-bottom: 0.1rem;
  margin: 0 auto;
}
.htl #h {
  height: 0.44rem;
  line-height: 0.44rem;
  font-size: 0.2rem;
}
/* .htl .h:nth-child(1) {
  background-color: #fea600;
  color: #fff;
} */
.active {
  height: 0.44rem;
  line-height: 0.44rem;
  font-size: 0.2rem;
  background-color: #fea600;
  color: #fff;
}
.hlone {
  display: flex;
  width: 3.22rem;
  height: 1.7rem;
  border: 1px solid #ccc;
  margin: 0.1rem auto;
}
.img-ll {
  width: 1.24rem;
  padding: 0.3rem 0px 0px 0.25rem;
}
.img-ll img {
  width: 0.78rem;
  height: 1.23rem;
}
.det-rr {
  flex: 1;
  padding: 0.3rem 0px 0px 0px;
  display: flex;
  flex-direction: column;
  font-size: 0.14rem;
}
.de {
  margin-bottom: 0.02rem;
}
.det-rr button {
  background-color: #ffa501;
  color: #fff;
  padding: 0.1rem 0.14rem;
  border-radius: 0.1rem;
}
.det-rr .de:nth-child(2) {
  color: red;
}
.det-rr .de:nth-child(1) {
  font-weight: 600;
}
.det-rr .de:nth-child(3) {
  color: #ccc;
}

.xianshi {
  height: auto;
  margin-top: 0.23rem;
  width: 100%;
  overflow: hidden;
  height: 1.6rem;
  padding: 0 0.23rem;
}
.xianshi .left {
  float: left;
  width: 1.64rem;
  height: 1.64rem;
  /* background-image: url("../assets/image/02.png"); */
  background-image: url('../../assets/image/big.png');
  background-size: 1.64rem;
  padding: 3px 0 0 5px;
}
.xianshi .left .one {
  font-size: 18px;
  font-weight: 900;
  color: #90a950;
}
.xianshi .left .two {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 900;
  color: #e6eed6;
}
.xianshi .left .two span {
  display: inline-block;
  background-color: #617c37;
  padding: 0 3px;
}
.xianshi .left .two i {
  font-style: normal;
  color: #617c37;
  margin: 0 3px;
}
.xianshi .right {
  float: right;
  display: flex;
  flex-direction: column;
  width: 1.64rem;
  height: 1.64rem;
  justify-content: space-between;
}
.xianshi .right .right-top {
  width: 100%;
  height: 48%;
  background-color: #af3;
  padding: 2px 0 0 5px;
  background-image: url("../../assets/image/b02.png");
}
.xianshi .right .right-top .one {
  font-size: 17px;
  font-weight: 900;
  color: #f56049;
}
.xianshi .right .right-top .two {
  margin-top: 2px;
  font-size: 12px;
  color: #f56049;
}
.xianshi .right .right-top .three {
  margin-top: 1px;
  padding-left: 2px;
  width: 66px;
  height: 18px;
  line-height: 18px;
  background: linear-gradient(#ff6145, #ff9474);
  font-size: 12px;
  color: #fff;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.xianshi .right .right-bottom {
  width: 100%;
  height: 48%;
  padding: 2px 0 0 5px;
  background-image: url("../../assets/image/small.png");
}
.xianshi .right .right-bottom .one {
  font-size: 17px;
  font-weight: 900;
  color: #ae44f6;
}
.xianshi .right .right-bottom .two {
  /* margin-top: 10px; */
  font-size: 14px;
  font-weight: 900;
  color: #ae55f1;
}
.xianshi .right .right-bottom .three {
  /* margin-top: 10px; */
  width: 70px;
  height: 5px;
  background-color: #b041fd;
  border-top-right-radius: 20px;
}

</style>